<script setup>
import { computed } from 'vue'
import { deleteAirData } from '@/api/air.js'
import { useCustomToast } from '@/util/custom-toast.js'
// 获取错误提示消息
const { showSuccess, showWarn, showError } = useCustomToast()
const props = defineProps({
  id: {
    type: Number,
    default: null
  }
})

const emit = defineEmits(['refreshAirDataList'])

// 确认删除提示框
const confirmDeleteDialog = defineModel({ type: Boolean })

// 避免直接修改父组件的数据
const airId = computed(() => props.id)

/**
 * 确认删除提示框
 */
const confirmDelete = () => {
  deleteAirData(airId.value).then(res => {
    if (res.code === 0) {
      showSuccess('Success', res.msg, 1000)

      // 刷新空气数据列表
      refreshAirData()

      // 关闭Dialog
      closeDialog()
    } else {
      showWarn('warn', res.msg, 1000)
    }
  }).catch(err => {
    showError('error', err.msg, 1000)
  })
}

/**
 * 关闭Dialog
 */
const closeDialog = () => {
  confirmDeleteDialog.value = false
}

/**
 * 删除数据成功刷新数据
 */
const refreshAirData = () => {
  // 向父组件传递刷新数据的事件
  emit('refreshAirDataList')
}
</script>

<template>
  <div class="col-12 lg:col-12">
    <!-- *****删除的dialog*****start -->
    <Dialog v-model:visible="confirmDeleteDialog" :styles="{width: '450px'}" header="警告" :modal="true">
      <div class="confirmation-content">
        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem;color: #c7c722;" />
        <span>您确定要删除吗 ?</span>
      </div>
      <template #footer>
        <Button label="确定" icon="pi pi-check" class="p-button-text" @click="confirmDelete" />
      </template>
    </Dialog>
    <!-- *****删除的dialog*****end -->
  </div>
</template>

<style scoped>

</style>